<template>
  <div>
    <ul>
      <li v-for="item in namelist" :key="item">{{ item }}</li>
    </ul>
    <p><button @click="editGirl">修改四美</button></p>
    <ul>
      <li v-for="item in manStar" :key="item">{{ item }}</li>
    </ul>
    <p><button @click="editMan">修改帅哥</button></p>

    <p>{{ userinfo.username }}--{{ userinfo.age }}--{{ userinfo.sex }}</p>
    <p><button @click="addSex">添加性别</button></p>
  </div>
</template>

<script>
import { ref, reactive } from "vue";

// vue3中解决了vue2中给对象添加属性和通过下标修改数据导致数据无法被监听的情况,

export default {
  name: "",
  props: [""],
  data() {
    return {
      namelist: ["佟丽娅", "热巴", "娜扎"],
      userinfo: {
        username: "宝强",
        age: 20,
      },
    };
  },
  methods: {
    editGirl() {
      this.namelist[0] = "哈妮克孜";
    },
    addSex() {
      this.userinfo.sex = "男";
    },
  },

  setup() {
    let manStar = reactive(["黄宗泽", "安志杰", "古天乐"]);
    console.log(manStar);
    const editMan = () => {
      manStar[0] = "党江超";
    };
    return {
      manStar,
      editMan,
    };
  },
};
</script>
<style scoped>
</style>